<%@ page import="cn.lger.pojo.Administrator" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/6/26
  Time: 12:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword"
          content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
    <link rel="shortcut icon" href="static/assets/css/images/favicon.png">

    <!-- Icons -->
    <link href="static/coreUI/vendors/css/flag-icon.min.css" rel="stylesheet">
    <link href="static/coreUI/vendors/css/font-awesome.min.css" rel="stylesheet">
    <link href="static/coreUI/vendors/css/simple-line-icons.min.css" rel="stylesheet">

    <!-- Main styles for this application -->
    <link href="static/coreUI/css/style.css" rel="stylesheet">
    <!-- Styles required by this views -->
    <title>后台管理</title>
</head>
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>

    <ul class="nav navbar-nav d-md-down-none">
        <%--<li class="nav-item px-3">--%>
        <%--<a class="nav-link" href="#">Dashboard</a>--%>
        <%--</li>--%>
        <%--<li class="nav-item px-3">--%>
        <%--<a class="nav-link" href="#">Users</a>--%>
        <%--</li>--%>
        <%--<li class="nav-item px-3">--%>
        <%--<a class="nav-link" href="#">Settings</a>--%>
        <%--</li>--%>
    </ul>
    <ul class="nav navbar-nav ml-auto">
        <%--<li class="nav-item d-md-down-none">--%>
        <%--<a class="nav-link" href="#"><i class="icon-bell"></i><span--%>
        <%--class="badge badge-pill badge-danger">5</span></a>--%>
        <%--</li>--%>
        <%--<li class="nav-item d-md-down-none">--%>
        <%--<a class="nav-link" href="#"><i class="icon-list"></i></a>--%>
        <%--</li>--%>
        <%--<li class="nav-item d-md-down-none">--%>
        <%--<a class="nav-link" href="#"><i class="icon-location-pin"></i></a>--%>
        <%--</li>--%>
        <%--<li class="nav-item dropdown">--%>
        <%--<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"--%>
        <%--aria-expanded="false">--%>
        <%--<img src="static/coreUI/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">--%>
        <%--</a>--%>
        <%--<div class="dropdown-menu dropdown-menu-right">--%>
        <%--<div class="dropdown-header text-center">--%>
        <%--<strong>Account</strong>--%>
        <%--</div>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span--%>
        <%--class="badge badge-info">42</span></a>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span--%>
        <%--class="badge badge-success">42</span></a>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span--%>
        <%--class="badge badge-danger">42</span></a>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span--%>
        <%--class="badge badge-warning">42</span></a>--%>
        <%--<div class="dropdown-header text-center">--%>
        <%--<strong>Settings</strong>--%>
        <%--</div>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a>--%>
        <%--<div class="divider"></div>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a>--%>
        <%--<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>--%>
        <%--</div>--%>
        <%--</li>--%>
    </ul>
    <%--<button class="navbar-toggler aside-menu-toggler" type="button">--%>
    <%--<span class="navbar-toggler-icon"></span>--%>
    <%--</button>--%>

</header>


<div class="app-body" id="body">
    <div class="sidebar">
        <nav class="sidebar-nav">
            <ul class="nav">
                <li class="nav-item">
                    <a href="" class="nav-link"><i class="icon-drop"></i> 影评首页</a>
                </li>
                <li   class="nav-item">
                    <a href="javascript:void(0)" class="nav-link"  :class="{'active':navBarItems[0].isShow}" @click="clickNavBar(0)"><i class="icon-pencil"></i> 管理文章</a>
                </li>
                <li   class="nav-item">
                    <a href="javascript:void(0)" class="nav-link"  :class="{'active':navBarItems[1].isShow}" @click="clickNavBar(1)"><i class="icon-pencil"></i> 反馈信息</a>
                </li>
                <li   class="nav-item">
                    <a href="javascript:void(0)" class="nav-link"  :class="{'active':navBarItems[2].isShow}" @click="clickNavBar(2)"><i class="icon-pencil"></i> 管理分类</a>
                </li>
                <li   class="nav-item">
                    <a href="javascript:void(0)" class="nav-link"  :class="{'active':navBarItems[3].isShow}" @click="clickNavBar(3)"><i class="icon-pencil"></i> 管理影评评论</a>
                </li>
                <li   class="nav-item" v-if="admin.superAdmin">
                    <a href="javascript:void(0)" class="nav-link"   :class="{'active':navBarItems[4].isShow}" @click="clickNavBar(4)"><i class="icon-pencil"></i> 超级管理员操作</a>
                </li>
                <li   class="nav-item">
                    <a href="javascript:void(0)" class="nav-link"  :class="{'active':navBarItems[5].isShow}" @click="showSelfInfo(5)"><i class="icon-pencil"></i> 修改个人信息</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link nav-link-danger" href="/adminLogout" target="_top"><i
                            class="icon-layers"></i> 管理员登出</a>
                </li>
            </ul>
        </nav>
        <%--<button class="sidebar-minimizer brand-minimizer" type="button"></button>--%>
    </div>

    <main class="main">

        <!-- Breadcrumb -->
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="javascript:void(0)">{{showContentChineseName}}</a></li>
        </ol>


        <div class="container-fluid">
            <div class="animated fadeIn">
                <div class="row">
                    <div class="col-lg-12">

                        <!--管理文章-->
                        <div v-show="navBarItems[0].isShow">
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-align-justify"></i> 文章列表
                                </div>
                                <div class="card-body">
                                    <table class="table table-responsive-sm">
                                        <thead>
                                        <tr>
                                            <th>文章id</th>
                                            <th>文章标题</th>
                                            <th>文章作者</th>
                                            <th>发表时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(article,index) in articles">
                                            <td>{{article.id}}</td>
                                            <td><span class="badge badge-dark">{{article.title}}</span></td>
                                            <td>{{article.author}}</td>
                                            <td>
                                               {{article.time}}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-outline-primary btn-sm"   data-toggle="modal"  data-target="#contentModal" @click="initContentModal(article.content,article.title)">查看文章</button>
                                                <button type="button" class="btn btn-outline-danger btn-sm "  data-toggle="modal" data-target="#confirmArticleDeleteModal" @click="deleteIndex=index">删除文章</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item " :class="{'disabled':currentPage===1}" ><a class="page-link "  href="javascript:void(0)" @click="getData(currentPage-1,currentKey,currentGetDataUrl)">Prev</a></li>
                                        <li v-for="pageNumber in pageNumbers" :class="{'active':currentPage===pageNumber}" class="page-item">
                                            <a class="page-link" href="javascript:void(0)" @click="getData(pageNumber,currentKey,currentGetDataUrl)">{{pageNumber}}</a>
                                        </li>
                                        <li class="page-item" :class="{'disabled':currentPage===totalPage||totalPage===0}"><a class="page-link" href="javascript:void(0)" @click="getData(currentPage+1,currentKey,currentGetDataUrl)">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--反馈信息-->
                        <div v-show="navBarItems[1].isShow">
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-align-justify"></i> 反馈信息列表
                                </div>
                                <div class="card-body">
                                    <table class="table table-responsive-sm">
                                        <thead>
                                        <tr>
                                            <th>反馈用户</th>
                                            <th>联系方式</th>
                                            <th>反馈内容</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(feedbackInfo,index) in feedbackInfos">
                                            <td>{{feedbackInfo.username}}</td>
                                            <td>{{feedbackInfo.phone}}</td>
                                            <td>{{feedbackInfo.content}}</td>
                                            <td>
                                                <button type="button" class="btn btn-outline-primary btn-sm"   data-toggle="modal"  data-target="#contentModal" @click="initContentModal(feedbackInfo.content,'反馈内容')">查看反馈</button>
                                                <button type="button" class="btn btn-outline-danger btn-sm "  data-toggle="modal" data-target="#confirmArticleDeleteModal" @click="deleteIndex=index">删除反馈</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item " :class="{'disabled':currentPage===1}" ><a class="page-link "  href="javascript:void(0)" @click="getData(currentPage-1,currentKey,currentGetDataUrl)">Prev</a></li>
                                        <li v-for="pageNumber in pageNumbers" :class="{'active':currentPage===pageNumber}" class="page-item">
                                            <a class="page-link" href="javascript:void(0)" @click="getData(pageNumber,currentKey,currentGetDataUrl)">{{pageNumber}}</a>
                                        </li>
                                        <li class="page-item" :class="{'disabled':currentPage===totalPage||totalPage===0}"><a class="page-link" href="javascript:void(0)" @click="getData(currentPage+1,currentKey,currentGetDataUrl)">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        <!--管理分类-->
                        <div v-show="navBarItems[2].isShow">
                            <div class="card">
                                <div class="card-header">
                                    <strong>操作选项</strong>
                                </div>
                                <div class="card-body">
                                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addCategoryModal" @click="initAddCategoryInfo">添加种类</button>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-align-justify"></i> 分类列表
                                </div>
                                <div class="card-body">
                                    <table class="table table-responsive-sm">
                                        <thead>
                                        <tr>
                                            <th>种类id</th>
                                            <th>种类名称</th>
                                            <th>种类描述</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(category,index) in categories">
                                            <td>{{category.id}}</td>
                                            <td>{{category.name}}</td>
                                            <td>{{category.description}}</td>
                                            <td>
                                                <button type="button" class="btn btn-outline-primary btn-sm"   data-toggle="modal"  data-target="#contentModal" @click="initContentModal(category.description,'种类描述')">查看描述</button>
                                                <button type="button" class="btn btn-outline-danger btn-sm "  data-toggle="modal" data-target="#confirmArticleDeleteModal" @click="deleteIndex=index">删除分类</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item " :class="{'disabled':currentPage===1}" ><a class="page-link "  href="javascript:void(0)" @click="getData(currentPage-1,currentKey,currentGetDataUrl)">Prev</a></li>
                                        <li v-for="pageNumber in pageNumbers" :class="{'active':currentPage===pageNumber}" class="page-item">
                                            <a class="page-link" href="javascript:void(0)" @click="getData(pageNumber,currentKey,currentGetDataUrl)">{{pageNumber}}</a>
                                        </li>
                                        <li class="page-item" :class="{'disabled':currentPage===totalPage||totalPage===0}"><a class="page-link" href="javascript:void(0)" @click="getData(currentPage+1,currentKey,currentGetDataUrl)">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        <!--管理影评评论-->
                        <div v-show="navBarItems[3].isShow">
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-align-justify"></i> 影评评论列表
                                </div>
                                <div class="card-body">
                                    <table class="table table-responsive-sm">
                                        <thead>
                                        <tr>
                                            <th>文章评论id</th>
                                            <th>文章id</th>
                                            <th>用户名</th>
                                            <th>评论内容</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(articleComment,index) in articleComments">
                                            <td>{{articleComment.id}}</td>
                                            <td>{{articleComment.articleId}}</td>
                                            <td>{{articleComment.username}}</td>
                                            <td><span class="d-block text-truncate" style="max-width: 100px">{{articleComment.content}}</span></td>
                                            <td>
                                                <button type="button" class="btn btn-outline-success btn-sm "  data-toggle="modal" data-target="#contentModal" @click="getArticle(articleComment.articleId)" >查看文章</button>
                                                <button type="button" class="btn btn-outline-primary btn-sm"   data-toggle="modal"  data-target="#contentModal" @click="initContentModal(articleComment.content,'评论内容')">查看评论</button>
                                                <button type="button" class="btn btn-outline-danger btn-sm "  data-toggle="modal" data-target="#confirmArticleDeleteModal" @click="deleteIndex=index">删除评论</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item " :class="{'disabled':currentPage===1}" ><a class="page-link "  href="javascript:void(0)" @click="getData(currentPage-1,currentKey,currentGetDataUrl)">Prev</a></li>
                                        <li v-for="pageNumber in pageNumbers" :class="{'active':currentPage===pageNumber}" class="page-item">
                                            <a class="page-link" href="javascript:void(0)" @click="getData(pageNumber,currentKey,currentGetDataUrl)">{{pageNumber}}</a>
                                        </li>
                                        <li class="page-item" :class="{'disabled':currentPage===totalPage||totalPage===0}"><a class="page-link" href="javascript:void(0)" @click="getData(currentPage+1,currentKey,currentGetDataUrl)">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        <!--超级管理员操作-->
                        <div v-show="navBarItems[4].isShow" v-if="admin.superAdmin">
                            <div class="card">
                                <div class="card-header">
                                    <strong>操作选项</strong>
                                </div>
                                <div class="card-body">
                                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addAdminModal" @click="initAddAdminInfo">添加普通管理员</button>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <i class="fa fa-align-justify"></i> 普通管理员列表
                                </div>
                                <div class="card-body">
                                    <table class="table table-responsive-sm">
                                        <thead>
                                        <tr>
                                            <th>管理员id</th>
                                            <th>管理员名称</th>
                                            <th>管理员邮箱</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(normalAdmin,index) in normalAdmins">
                                            <td>{{normalAdmin.id}}</td>
                                            <td>{{normalAdmin.username}}</td>
                                            <td>{{normalAdmin.email}}</td>
                                            <td>
                                                <button type="button" class="btn btn-outline-danger btn-sm "  data-toggle="modal" data-target="#confirmArticleDeleteModal" @click="deleteIndex=index">删除管理员</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item " :class="{'disabled':currentPage===1}" ><a class="page-link "  href="javascript:void(0)" @click="getData(currentPage-1,currentKey,currentGetDataUrl)">Prev</a></li>
                                        <li v-for="pageNumber in pageNumbers" :class="{'active':currentPage===pageNumber}" class="page-item">
                                            <a class="page-link" href="javascript:void(0)" @click="getData(pageNumber,currentKey,currentGetDataUrl)">{{pageNumber}}</a>
                                        </li>
                                        <li class="page-item" :class="{'disabled':currentPage===totalPage||totalPage===0}"><a class="page-link" href="javascript:void(0)" @click="getData(currentPage+1,currentKey,currentGetDataUrl)">Next</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>


                        <!--修改个人信息-->
                        <div v-show="navBarItems[5].isShow">
                            <div class="row">
                                <div class="col-sm-3"></div>
                                <div class="col-sm-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <i class="fa fa-align-justify"></i> 个人信息表
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <label for="usernameSelfInfo">用户名</label>
                                                        <input type="text" class="form-control" id="usernameSelfInfo"  :value="adminSelfInfo.username.value" disabled>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--/.row-->

                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <label for="passwordSelfInfo">新的密码</label>
                                                        <input type="password" class="form-control" id="passwordSelfInfo" placeholder="请输入密码" v-model.trim="adminSelfInfo.password.value" :class="{'is-invalid':adminSelfInfo.password.invalid}" >
                                                        <div class="invalid-feedback" v-show="adminSelfInfo.password.invalid">
                                                            {{adminSelfInfo.password.errorMessage}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--/.row-->

                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <label for="passwordSelfInfo">确认密码</label>
                                                        <input type="password" class="form-control" id="surePasswordSelfInfo" placeholder="请再次输入密码" v-model="adminSelfInfo.surePassword.value" :class="{'is-invalid':adminSelfInfo.surePassword.invalid}" @blur="checkSurePassword(adminSelfInfo)" :disabled="surePasswordInSelfInfo">
                                                        <div class="invalid-feedback" v-show="adminSelfInfo.surePassword.invalid">
                                                            {{adminSelfInfo.surePassword.errorMessage}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--/.row-->


                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div class="form-group">
                                                        <label for="emailSelfInfo">邮箱</label>
                                                        <input type="text" class="form-control" id="emailSelfInfo" placeholder="请输入邮箱" v-model="adminSelfInfo.email.value" :class="{'is-invalid':adminSelfInfo.email.invalid}" @blur="checkEmail(adminSelfInfo)">
                                                        <div class="invalid-feedback" v-show="adminSelfInfo.email.invalid">
                                                            {{adminSelfInfo.email.errorMessage}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--/.row-->
                                        </div>
                                        <div class="card-footer">
                                            <button type="button" class="btn btn-sm btn-primary" :disabled="changeAdminInfoButton" @click="changeAdminInfo"><i class="fa fa-dot-circle-o"></i> 保存</button>
                                            <button type="button" class="btn btn-sm btn-danger" @click="initSelfInfo()"><i class="fa fa-ban"></i> 重置</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- /.conainer-fluid -->
    </main>



    <!-- Modal -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="addCategoryModalTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCategoryModalTitle">添加种类</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="word-wrap:break-word;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="categoryName">种类名称</label>
                                    <input type="text" class="form-control" id="categoryName" placeholder="请输入种类名称" v-model="addCategoryInfo.name.value" :class="{'is-invalid':!addCategoryInfo.name.valid}">
                                    <div class="invalid-feedback" v-show="!addCategoryInfo.name.valid">
                                        种类名称不能为空
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.row-->

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="categoryDescription">种类描述</label>
                                    <textarea type="text" class="form-control" id="categoryDescription" placeholder="种类描述" v-model="addCategoryInfo.description"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--/.row-->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"  @click="addCategory">保存</button>
                </div>
            </div>
        </div>
    </div>




    <!--添加普通管理员 Modal -->
    <div class="modal fade" id="addAdminModal" tabindex="-1" role="dialog" aria-labelledby="addAdminModalTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addAdminModalTitle">添加普通管理员</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="word-wrap:break-word;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="username">用户名</label>
                                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" v-model="addAdminFormInfo.username.value" :class="{'is-invalid':addAdminFormInfo.username.invalid}" @blur="checkUsername">
                                    <div class="invalid-feedback" v-show="addAdminFormInfo.username.invalid">
                                        {{addAdminFormInfo.username.errorMessage}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.row-->

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password">密码</label>
                                    <input type="password" class="form-control" id="password" placeholder="请输入密码" v-model="addAdminFormInfo.password.value" :class="{'is-invalid':addAdminFormInfo.password.invalid}" @blur="checkPassword">
                                    <div class="invalid-feedback" v-show="addAdminFormInfo.password.invalid">
                                        {{addAdminFormInfo.password.errorMessage}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.row-->

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password">确认密码</label>
                                    <input type="password" class="form-control" id="surePassword" placeholder="请再次输入密码" v-model="addAdminFormInfo.surePassword.value" :class="{'is-invalid':addAdminFormInfo.surePassword.invalid}" @blur="checkSurePassword(addAdminFormInfo)">
                                    <div class="invalid-feedback" v-show="addAdminFormInfo.surePassword.invalid">
                                        {{addAdminFormInfo.surePassword.errorMessage}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.row-->


                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="email">邮箱</label>
                                    <input type="text" class="form-control" id="email" placeholder="请输入邮箱" v-model="addAdminFormInfo.email.value" :class="{'is-invalid':addAdminFormInfo.email.invalid}" @blur="checkEmail(addAdminFormInfo)">
                                    <div class="invalid-feedback" v-show="addAdminFormInfo.email.invalid">
                                        {{addAdminFormInfo.email.errorMessage}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.row-->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"  @click="addAdmin" :disabled="addAdminSaveButton">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade bd-example-modal-lg" id="contentModal" tabindex="-1" role="dialog" aria-labelledby="contentModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contentModalTitle">{{titleInContentModal}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="word-wrap:break-word;" id="preview">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade " id="confirmArticleDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmArticleDeleteModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-primary " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmArticleDeleteModalTitle">询问</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    是否确定要删除该数据
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
                    <button type="button" class="btn btn-primary" @click="deleteData">是</button>
                </div>
            </div>
        </div>
    </div>



    <!-- Modal -->
    <div class="modal fade " id="deleteOrAddSuccessModal" tabindex="-1" role="dialog" aria-labelledby="deleteOrAddSuccessModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-success " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteOrAddSuccessModalTitle">成功</h5>
                </div>
                <div class="modal-body">
                    {{deleteOrAddSuccessModalContent}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade " id="editAdminSelfInfoSuccessModal" tabindex="-1" role="dialog" aria-labelledby="editAdminSelfInfoSuccessModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-success " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editAdminSelfInfoSuccessModalTitle">成功</h5>
                </div>
                <div class="modal-body">
                    修改成功
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade bd-example-modal-lg" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="errorModalTitle">错误</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    出现一个意料之外的错误，请联系技术人员
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

</div>



<footer class="app-footer">
    <span><a href="http://coreui.io">CoreUI</a> © 2018 creativeLabs.</span>
    <span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>



<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Bootstrap and necessary plugins -->
<script src="static/coreUI/vendors/js/jquery.min.js"></script>
<script src="static/coreUI/vendors/js/popper.min.js"></script>
<script src="static/coreUI/vendors/js/bootstrap.min.js"></script>
<script src="static/coreUI/vendors/js/pace.min.js"></script>

<!-- Plugins and scripts required by all views -->
<script src="static/coreUI/vendors/js/Chart.min.js"></script>

<!-- CoreUI main scripts -->

<script src="static/coreUI/js/app.js"></script>



<%--markdown全家桶--%>
<script src="static/assets/markdown/lib/marked.min.js"></script>
<script src="static/assets/markdown/lib/prettify.min.js"></script>
<script src="static/assets/markdown/lib/raphael.min.js"></script>
<script src="static/assets/markdown/lib/underscore.min.js"></script>
<script src="static/assets/markdown/lib/sequence-diagram.min.js"></script>
<script src="static/assets/markdown/lib/flowchart.min.js"></script>
<script src="static/assets/markdown/lib/jquery.flowchart.min.js"></script>
<script src="static/assets/markdown/js/editormd.js"></script>
<%--markdown全家桶--%>

<script>

    $(document).ready(function(){
        $('#deleteOrAddSuccessModal').on('hidden.bs.modal', function (e) {
            bodyContent.$options.methods.getData(1,bodyContent.$data.currentKey,bodyContent.$data.currentGetDataUrl);
        });
        $('#editAdminSelfInfoSuccessModal').on('hidden.bs.modal', function (e) {
            bodyContent.$options.methods.initSelfInfo();
        });
    });
    var bodyContent = new Vue({
        el: "#body",
        data: {
            articles: "",
            feedbackInfos:"",
            categories:"",
            articleComments:"",
            normalAdmins:"",
            adminInfoCache:{
                username:"",
                email:"",
            },
            adminSelfInfo:{
                username:{
                    value:""
                },
                password:{
                    value:""
                },
                surePassword:{
                    value:"",
                    invalid:false,
                    initInvalid:false,
                    errorMessage:""
                },
                email:{
                    value:"",
                    invalid:false,
                    initInvalid:false,
                    errorMessage:"",
                }
            },
            addCategoryInfo:{
                name:{
                    value:"",
                    valid:true
                },
                description:""
            },
            addAdminFormInfo:{
                username:{
                    value:"",
                    invalid:false,
                    initInvalid:true,
                    errorMessage:""
                },
                password:{
                    value:"",
                    invalid:false,
                    initInvalid:true,
                    errorMessage:""
                },
                surePassword:{
                    value:"",
                    invalid:false,
                    initInvalid:true,
                    errorMessage:""
                },
                email:{
                    value:"",
                    invalid:false,
                    initInvalid:true,
                    errorMessage:""
                }
            },
            navBarItems: [
                {
                    chineseName: "管理文章",
                    key:"articles",
                    currentGetDataUrl:"/api/article/list",
                    currentDeleteDataUrl:"api/admin/article/",
                    isShow: false,
                },
                {
                    chineseName: "反馈信息",
                    key:"feedbackInfos",
                    currentGetDataUrl:"/api/admin/contact/list",
                    currentDeleteDataUrl:"/api/admin/contact/",
                    isShow: false,
                },
                {
                    chineseName: "管理分类",
                    key:"categories",
                    currentGetDataUrl:"/api/admin/category/list",
                    currentDeleteDataUrl:"/api/admin/category/",
                    isShow: false,
                },
                {
                    chineseName: "管理影评评论",
                    key:"articleComments",
                    currentGetDataUrl:"/api/admin/comment/list",
                    currentDeleteDataUrl:"/api/admin/comment/",
                    isShow: false,
                },
                {
                    chineseName: "超级管理员操作",
                    key:"normalAdmins",
                    currentGetDataUrl:"/api/admin/list",
                    currentDeleteDataUrl:"/api/admin/",
                    isShow: false
                },
                {
                    chineseName: "修改个人信息",
                    key:"",
                    currentGetDataUrl:"",
                }
            ],
            currentPage: 0,
            size: 0,
            totalPage:0,
            showContentChineseName: "",
            contentInContentModal:"",
            titleInContentModal:"",
            deleteIndex:"",
            currentKey:'',
            currentGetDataUrl:'',
            currentDeleteDataUrl:"",
            deleteOrAddSuccessModalContent:"",
            admin:{
                superAdmin:"",
                username:"",
            }

        },
        methods: {
            clickNavBar:function(index){
                this.currentKey=this.navBarItems[index].key;
                this.currentGetDataUrl=this.navBarItems[index].currentGetDataUrl;
                this.currentDeleteDataUrl=this.navBarItems[index].currentDeleteDataUrl;
                this.showContentChineseName = this.navBarItems[index].chineseName;
                for (var i = 0; i < this.navBarItems.length; i++) {
                    this.navBarItems[i].isShow = false;
                }
                this.navBarItems[index].isShow = true;
                // console.log(e);
                this.$options.methods.getData(1, this.currentKey,this.currentGetDataUrl);
            },
            showSelfInfo:function(index){
                this.showContentChineseName = this.navBarItems[index].chineseName;
                for (var i = 0; i < this.navBarItems.length; i++) {
                    this.navBarItems[i].isShow = false;
                }
                this.navBarItems[index].isShow = true;
                this.$options.methods.initSelfInfo();
            },
            initSelfInfo:function(){
                bodyContent.$data.adminSelfInfo.username.value=bodyContent.$data.adminInfoCache.username;
                bodyContent.$data.adminSelfInfo.password.value='';
                bodyContent.$data.adminSelfInfo.email.value=bodyContent.$data.adminInfoCache.email;
                bodyContent.$data.adminSelfInfo.email.invalid=false;
                bodyContent.$data.adminSelfInfo.email.initInvalid=false;
                bodyContent.$data.adminSelfInfo.email.errorMessage='';
                bodyContent.$data.adminSelfInfo.surePassword.value="";
                bodyContent.$data.adminSelfInfo.surePassword.invalid=false;
                bodyContent.$data.adminSelfInfo.surePassword.initInvalid=false;
                bodyContent.$data.adminSelfInfo.surePassword.errorMessage='';
            },
            initAddCategoryInfo:function(){
                this.addCategoryInfo.name.valid=true;
                this.addCategoryInfo.name.value="";
                this.addCategoryInfo.description="";
            },
            addCategory:function(){
                if($.trim(this.addCategoryInfo.name.value)!==""){
                    this.addCategoryInfo.name.valid=true;
                }else {
                    this.addCategoryInfo.name.valid=false;
                    return;
                }
                $.ajax({
                    type: "POST",
                    url: "/api/admin/category",
                    data:{
                        "description":this.addCategoryInfo.description,
                        "name":this.addCategoryInfo.name.value
                    },
                    dataType: 'json',
                    success: function (result) {
                        $('#addCategoryModal').modal('toggle');
                        bodyContent.$data.deleteOrAddSuccessModalContent="添加成功";
                        $('#deleteOrAddSuccessModal').modal('toggle');
                    },
                    error: function (result) {
                        $('#addCategoryModal').modal('toggle');
                        $('#errorModal').modal('toggle');
                    }
                })
            },
            getData:function(currentPage,key,url){
                bodyContent.$data.currentPage=currentPage;
                $.ajax({
                    type: "GET",
                    url: url + "?currentPage=" + bodyContent.$data.currentPage + "&size=" + bodyContent.$data.size,
                    dataType: 'json',
                    success: function (result) {
                        bodyContent.$data[key] = result.content;
                        bodyContent.$data.currentPage=result.page;
                        bodyContent.$data.size=result.size;
                        bodyContent.$data.totalPage=Math.ceil(result.count/result.size);

                    },
                    error: function (result) {
                        $('#errorModal').modal('toggle');
                    }
                })
            },

            deleteData:function () {
                var id = this[this.currentKey][this.deleteIndex].id;
                $.ajax({
                    type:"DELETE",
                    url:this.currentDeleteDataUrl+id,
                    dataType:'json',
                    success:function (result) {
                        $('#confirmArticleDeleteModal').modal('toggle');
                        if(result===1){
                            bodyContent.$data.deleteOrAddSuccessModalContent="删除成功";
                            $('#deleteOrAddSuccessModal').modal('toggle');
                        }else {
                            $('#errorModal').modal('toggle');
                        }
                    },
                    error:function(){
                        $('#confirmArticleDeleteModal').modal('toggle');
                        $('#errorModal').modal('toggle');
                    },
                })
            },
            getArticle:function (id) {
                $.ajax({
                    type:"GET",
                    url:"/api/article/"+id,
                    dataType:"json",
                    success:function (result) {
                        bodyContent.$data.contentInContentModal=result.content;
                        bodyContent.$data.titleInContentModal=result.title;
                        document.getElementById("preview").innerHTML="<textarea style=\"display:none;\" placeholder=\"markdown语言\">"+bodyContent.$data.contentInContentModal+"</textarea>"
                        editormd.markdownToHTML("preview", {
                            htmlDecode: "style,script,iframe",
                            emoji: true,
                            taskList: true,
                            tex: true,  // 默认不解析
                            flowChart: true,  // 默认不解析
                            sequenceDiagram: true  // 默认不解析
                        });
                        $('#contentModal').modal('toggle');
                    },
                    error:function () {
                        $('#errorModal').modal('toggle');
                    }
                })
            },
            initAddAdminInfo:function(){
                for(var i in this.addAdminFormInfo) {
                    this.addAdminFormInfo[i].invalid=false;
                    this.addAdminFormInfo[i].initInvalid=true;
                    this.addAdminFormInfo[i].errorMessage="";
                    this.addAdminFormInfo[i].value="";
                }
            },
            checkUsername:function () {
                this.addAdminFormInfo.username.invalid=true;
                this.addAdminFormInfo.username.initInvalid=true;
                this.addAdminFormInfo.username.value=$.trim(this.addAdminFormInfo.username.value);
                if(this.addAdminFormInfo.username.value===''){
                    this.addAdminFormInfo.username.errorMessage="用户名不能为空";
                    return;
                }else {
                    $.ajax({
                        type:"GET",
                        url:"/api/admin/check?username="+this.addAdminFormInfo.username.value,
                        dataType:"json",
                        success:function (result) {
                            if(result>=1){
                                bodyContent.$data.addAdminFormInfo.username.errorMessage="用户名已存在";

                            }else{
                                bodyContent.$data.addAdminFormInfo.username.invalid=false;
                                bodyContent.$data.addAdminFormInfo.username.initInvalid=false;
                                bodyContent.$data.addAdminFormInfo.username.errorMessage="";
                            }
                        },
                    })
                }
            },
            checkPassword:function () {
                this.addAdminFormInfo.password.invalid=true;
                this.addAdminFormInfo.password.initInvalid=true;
                this.addAdminFormInfo.password.value=$.trim(this.addAdminFormInfo.password.value);
                this.addAdminFormInfo.surePassword.invalid=false;
                this.addAdminFormInfo.surePassword.initInvalid=true;
                this.addAdminFormInfo.surePassword.value='';
                if(this.addAdminFormInfo.password.value===''){
                    this.addAdminFormInfo.password.errorMessage="密码不能为空";
                    return;
                }else{
                    this.addAdminFormInfo.password.invalid=false;
                    this.addAdminFormInfo.password.initInvalid=false;
                    this.addAdminFormInfo.password.errorMessage="";
                }

            },
            checkSurePassword:function (obj) {
                obj.surePassword.invalid=true;
                obj.surePassword.initInvalid=true;
                obj.surePassword.value=$.trim(obj.surePassword.value);
                if(obj.password.value!==obj.surePassword.value){
                    obj.surePassword.errorMessage="密码不一致";
                    return;
                }else {
                    obj.surePassword.invalid=false;
                    obj.surePassword.initInvalid=false;
                    obj.surePassword.errorMessage="";
                }
            },
            checkEmail:function (obj) {
                obj.email.invalid=true;
                obj.email.initInvalid=true;
                obj.email.value=$.trim(obj.email.value);
                if(obj.email.value!==''){
                    var regExp=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g;
                    if(regExp.test(obj.email.value)){
                        obj.email.invalid=false;
                        obj.email.initInvalid=false;
                        obj.email.errorMessage="";
                    }else {
                        obj.email.errorMessage="邮箱格式不正确";
                    }
                }else {
                    obj.email.errorMessage="邮箱不能为空";
                }
            },
            addAdmin:function(){
                $.ajax({
                    type: "POST",
                    url: "api/admin",
                    data:{
                        "email":this.addAdminFormInfo.email.value,
                        "username":this.addAdminFormInfo.username.value,
                        "password":this.addAdminFormInfo.password.value,
                    },
                    dataType: 'json',
                    success: function (result) {
                        $('#addAdminModal').modal('toggle');
                        bodyContent.$data.deleteOrAddSuccessModalContent="添加成功";
                        $('#deleteOrAddSuccessModal').modal('toggle');
                    },
                    error: function (result) {
                        $('#addAdminModal').modal('toggle');
                        $('#errorModal').modal('toggle');
                    }
                })
            },
            changeAdminInfo:function () {
                $.ajax({
                    type: "PUT",
                    url: "api/admin",
                    data:{
                        "email":this.adminSelfInfo.email.value,
                        "password":this.adminSelfInfo.password.value,
                    },
                    dataType: 'json',
                    success: function (result) {
                        bodyContent.$data.adminInfoCache.email=result.email;
                        $('#editAdminSelfInfoSuccessModal').modal('toggle');
                    },
                    error: function (result) {
                        $('#errorModal').modal('toggle');
                    }
                })
            },
            initContentModal:function (articleContent,articleTitle) {
                bodyContent.$data.contentInContentModal=articleContent;
                bodyContent.$data.titleInContentModal=articleTitle;
                document.getElementById("preview").innerHTML="<textarea style=\"display:none;\" placeholder=\"markdown语言\">"+bodyContent.$data.contentInContentModal+"</textarea>"
                editormd.markdownToHTML("preview", {
                    htmlDecode: "style,script,iframe",
                    emoji: true,
                    taskList: true,
                    tex: true,  // 默认不解析
                    flowChart: true,  // 默认不解析
                    sequenceDiagram: true  // 默认不解析
                });
            }
        },
        computed:{
            pageNumbers:function () {
                var left;
                var right;
                if(this.totalPage>=5){
                    if(this.currentPage>=3&&this.currentPage+2<=this.totalPage){
                        left=this.currentPage-2;
                        right=this.currentPage+2;
                    }else if(this.currentPage<3){
                        left=1;
                        right=5;
                    }else {
                        right=this.totalPage;
                        left=this.totalPage-4;
                    }
                }else {
                    left=1;
                    right=this.totalPage;
                }
                var pageNumbers=[];
                while(left<=right){
                    pageNumbers.push(left);
                    left++;
                }
                return pageNumbers;
            },
            addAdminSaveButton:function () {
                var result=false;
                for(var  i in this.addAdminFormInfo){
                    result=result||this.addAdminFormInfo[i].invalid||this.addAdminFormInfo[i].initInvalid;
                }
                return result;
            },
            surePasswordInSelfInfo:function () {
                this.adminSelfInfo.surePassword.value='';
                if(this.adminSelfInfo.password.value===''){
                    this.adminSelfInfo.surePassword.invalid=false;
                    this.adminSelfInfo.surePassword.initInvalid=false;
                    return true;
                }else {
                    this.adminSelfInfo.surePassword.invalid=false;
                    this.adminSelfInfo.surePassword.initInvalid=true;
                    return false;
                }
            },
            changeAdminInfoButton:function () {
                if(this.adminSelfInfo.email.invalid||this.adminSelfInfo.email.initInvalid||this.adminSelfInfo.surePassword.initInvalid||this.adminSelfInfo.surePassword.invalid){
                    return true;
                }else{
                    if(this.adminSelfInfo.password.value!==""||this.adminSelfInfo.email.value!==this.adminInfoCache.email){
                        return false;
                    }else {
                        return true;
                    }

                }
            }
        },
        created:function () {
            this.$data.admin.superAdmin='<%=((Administrator)session.getAttribute("admin")).getSuperadmin()%>'==='yes';
            this.$data.adminSelfInfo.username.value=this.$data.adminInfoCache.username='<%=((Administrator)session.getAttribute("admin")).getUsername()%>';
            this.$data.adminSelfInfo.email.value=this.$data.adminInfoCache.email='<%=((Administrator)session.getAttribute("admin")).getEmail()%>';
        }
    })

</script>
</body>
</html>
